<template>
  <div class="el-single-select">
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :title="supplierData.title"
      :top="sta"
      :visible.sync="visible"
      v-if="visible"
      width="1000px"
    >
      <div class="el-dialog-box">
        <div class="dialog-top">
          <slot name="dialogTop">
        <div class="dialog-input">
          <span class="label">结算单编号：</span>
          <el-input
            placeholder="请输入结算单编号模糊查询"
            v-model="formData.settlementCode"
            style="width: 260px"
            clearable
          />
        </div>
        <div class="dialog-input">
          <span class="label">合同编号：</span>
          <el-input
            placeholder="请输入合同编号模糊查询"
            v-model="formData.contractCode"
            style="width: 260px"
            clearable
          />
        </div>
        <div class="dialog-input">
          <span class="label">填报单位：</span>
          <el-input
            placeholder="请输入填报单位模糊查询"
            v-model="formData.reportInOrgName"
            style="width: 260px"
            clearable
          />
        </div>
        <div class="dialog-input">
          <span class="label">供应商：</span>
          <el-input
            placeholder="请输入供应商模糊查询"
            v-model="formData.supplierName"
            style="width: 260px"
            clearable
          />
        </div>
        <div style="width: 100%; display: flex; justify-content: center">
          <el-button
            size="mini"
            type="primary-font-mini"
            @click="singleSelectSearch"
            >搜索
          </el-button>
          <el-button size="mini" type="default-mini" @click="handleReset"
            >重置
          </el-button>
        </div>
          </slot>
        </div>
        <div class="dialog-bottom">
          <el-table
            :data="supplierData.tableData"
            @select="dialogCheck"
            @select-all="dialogCheck"
            @selection-change="dialogCheckChange"
            ref="multipleTable"
            max-height="314"
            tooltip-effect="dark"
            v-if="visible"
          >
            <el-table-column label="序号" type="index" width="55">
            </el-table-column>
            <el-table-column
              :key="m"
              :label="i.label"
              :prop="i.prop"
              v-for="(i, m) in supplierData.tableHeadOptions"
            >
            </el-table-column>
            <el-table-column label="操作" width="155">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  @click.native="checkDetail(scope.$index, scope)"
                  border
                  size="mini"
                  v-model="radio"
                  >选择
                </el-radio>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="dialog-footer" slot="footer">
        <div id="ccui-paging">
          <el-pagination
            :current-page="pageNoCode"
            :page-size="supplierData.formDate.pageSize"
            :pager-count="5"
            :pageSizes="pageSizes"
            :total="supplierData.recordsTotal"
            @addCurrentPage="internalCurrentPage"
            @current-change="handleCurrentChange"
            @next-click="handleNext"
            @prev-click="handlePrev"
            @size-change="handleSizeChange"
            background
            layout="total, sizes, prev, pager, next, jumper"
            next-text="下一页 >"
            popper-class="ccui-paging-page-size-popper"
            prev-text="< 上一页"
          ></el-pagination>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="default-mini" @click="close"
          >取 消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="confirm"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "singleSupplier",
  props: {
    supplierData: {
      type: Object,
      default: () => {}
    },
    // getListSettlementPage:Function,
    // getSettlementParamsObj:Object
  },
  watch: {
    // dialogVisible() {
    //   this.visible = this.dialogVisible;
    // },
    // dataObj() {
    //   this.data = this.dataObj;
    //   this.multipleSelection = [];
    //   this.add();
    //   console.log("dataObj", this.data);
    // }
  },
  data() {
    return {
      data: [],
      pageSizeCode: 20,
      pageNoCode: 0,
      present: "",
      radio: "",
      input: {
        inputMc: "",
        inputJc: "",
        inputSj: ""
      },
      sta: "5vh",
      objs: [],
      inputs: {},
      selectioned: [],
      multipleSelection: [],
      restaurants: [],
      timeout: null,
      isShow: true,
      isShows: true,
      visible: false,
      pageSizes: [10, 20, 50, 100, 500]
    };
  },
  methods: {
    init(){
      this.visible = true;
    //   getListSettlementPage(this.getSettlementParamsObj).then(res=>{
    //     this.tableData = res.data.data.rows;
    //     this.pageDate.total = res.data.data.recordsTotal;
    //     // this.pageDate.pageNo=res.data.data.pageNo;

    //     // this.tableData.forEach(v => {
    //     //   v.currSetCountBackups = v.currSetCount;
    //     //   v.currSetMoneyBackups = v.currSetMoney;
    //     //   v.currSetCountBackups = v.currSetCountBackups.toFixed(3);
    //     //   v.currSetMoneyBackups = v.currSetMoneyBackups.toFixed(2);
    //     // });
    //   })
    },
    close() {
      this.visible = false;
      console.log("a");
      // this.$emit("update:dialogVisible", false);
      this.$emit("close", false);
    },
    confirm() {
      this.visible = false;
      this.$emit("update:visible", false);
      // this.$emit("confirm", this.multipleSelection);
      this.$emit("selectPartyB", {
        confirmSelect: this.multipleSelection,
        status: "confirm"
      });
    },
    handlePrev() {},
    handleNext() {},
    checkDetail(val, scope) {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        if (i === val) {
          a[i].innerText = "已选择";
          this.multipleSelection = scope.row;
          a[i].setAttribute("class", "el-radio__label checked");
        } else {
          a[i].innerText = "选择";
          a[i].setAttribute("class", "el-radio__label");
        }
      }
      this.inputs = scope.row;

      this.confirm();
    },
    internalCurrentPage(val) {
      val = 10;
      console.log(`当前22页: ${val}`);
    },
    handleSizeChange(val) {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      this.$emit("handleSizeChange", val);
      console.log(`每页 ${val} 条`);
      this.supplierData.formDate.pageSize = val;
      this.$emit("selectPartyB", { pageSize: val, status: "pageSize" });
    },
    handleCurrentChange(val) {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      this.$emit("handleCurrentChange", val);
      console.log(`当前页: ${val}`);
      this.supplierData.formDate.pageNo = val;
      this.$emit("selectPartyB", { pageNo: val, status: "pageNo" });
    },
    dialogCheck: function (selection, row) {
      this.$refs.multipleTable.clearSelection();
      if (selection.length === 0) {
        // 判断selection是否有值存在
        return;
      }
      if (row) {
        this.selectioned = row;
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
    dialogCheckChange(row) {
      this.multipleSelection = row;
      if (row.length === 0) {
        this.selectioned = null;
      }
      if (row[row.length - 1] !== undefined) {
        this.objs = row[row.length - 1];
      }
    },
    add() {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      console.log("1111", this.input);
      this.$emit("addInput", this.input);
    },
    reset() {
      this.input.inputMc = "";
      this.input.inputJc = "";
      this.input.inputSj = "";
      this.inputs = {};
      this.data = [];
    },
    handleSelect(item) {
      this.data = item;
    },
    myDetermine() {
      this.input.inputMc = "";
      this.input.inputJc = "";
      this.input.inputSj = "";
      this.inputs = {};
      this.data = [];
      // this.$refs.multipleTable.clearSelection();
      this.visible = false;
      // this.$emit("update:dialogVisible", false);
    },
    myCancel() {
      if (JSON.stringify(this.inputs) !== "{}") {
        this.data = [];
        this.input.inputMc = "";
        this.input.inputJc = "";
        this.input.inputSj = "";
        // this.$refs.multipleTable.clearSelection();
        this.visible = false;
        // this.$emit("update:dialogVisible", false);
        this.$emit("listenTochildEvent", this.inputs);
        this.isShows = false;
        this.isShow = true;
        this.inputs = {};
      } else {
        this.$emit("listenTochildEvent", this.inputs);
      }
    },
    handleClose() {
      this.data = [];
      this.input.inputMc = "";
      this.input.inputJc = "";
      this.input.inputSj = "";
      this.inputs = {};
      // this.$refs.multipleTable.clearSelection();
      this.visible = false;
      // this.$emit("update:dialogVisible", false);
    },
    handleCheckChange(data, checked, node) {
      this.data = data;
    },
    //搜索
    singleSelectSearch() {
      this.$emit("selectPartyB", {
        formDate: this.supplierData.formDate,
        status: "search"
      });
    },
    //重置
    handleReset() {
      this.$emit("selectPartyB", { status: "reset" });
    }
  }
};
</script>

<style lang="scss" scoped>
.chooseSettle {
  display: inline-block;
}
/deep/.el-single-select .el-dialog__wrapper .el-dialog .el-dialog__body {
  .el-dialog-box .dialog-top {
    justify-content: space-between;
  }
}
// /deep/ .el-table__body-wrapper {
//   max-height: 212px !important;
// }
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
/deep/ .el-dialog__footer {
  border-top: none;
}
// .el-single-select .el-dialog__wrapper .el-dialog {
//   height: 606px !important;
// }
</style>
